<template>
  <ActionPanel>
    <el-table :data="data" border class="wfull">
      <el-table-column label="名称" :width="150">
        <template #default="{ row }">
          <ElInput v-model="row.name" />
        </template>
      </el-table-column>
      <el-table-column label="标签" :width="280">
        <template #default="{ row }">
          <ElInput v-model="row.label" />
        </template>
      </el-table-column>
      <el-table-column label="备注" :width="280">
        <template #default="{ row }">
          <ElInput v-model="row.comment" />
        </template>
      </el-table-column>
      <el-table-column label="图标" :width="80">
        <template #default="{ row }">
          <IconPicker v-model="row.icon" />
        </template>
      </el-table-column>
      <el-table-column label="颜色" :width="80">
        <template #default="{ row }">
          <ElColorPicker v-model="row.color" />
        </template>
      </el-table-column>
      <el-table-column label="尺寸" :width="100">
        <template #default="{ row }">
          <SizeEditor v-model="row.size" />
        </template>
      </el-table-column>
      <el-table-column label="HOVER颜色" :width="120">
        <template #default="{ row }">
          <ElColorPicker v-model="row.hoverColor" />
        </template>
      </el-table-column>
      <el-table-column label="分组项">
        <template #default="{ row }">
          <DeclaresEditor v-if="isSeed" :seed-name="props.seedName" v-model="row.items" />
          <AppGroupItemSelect v-else v-model="row.items" />
        </template>
      </el-table-column>
      <el-table-column :width="50">
        <template #header>
          <ElButton type="primary" size="small" link @click="() => data.push({items: []})">
            <Icon icon="ep:plus" />
          </ElButton>
        </template>
        <template #default="{ $index }">
          <ElButton type="danger" size="small" link @click="() => data.splice($index, 1)">
            <Icon icon="ep:remove" color="red" />
          </ElButton>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <ElButton type="primary" @click="save">保存</ElButton>
      <ElButton @click="close">关闭</ElButton>
    </template>
  </ActionPanel>
</template>
<script setup lang="ts">
  import { ElColorPicker, ElInput, ElTable, ElTableColumn, ElButton } from 'element-plus';
  import { Icon } from '@/components/Icon';
  import { IconPicker } from '@/components/IconPicker';
  import { getInitData } from '..';
  import { inject, ref } from 'vue';
  import { currentApp, getSeed } from '@/views/seed-dev';
  import { SizeEditor } from '../../SizeEditor';
  import { ActionPanel } from '@/components/ActionPanel';
  import feedback from '@/utils/feedback';
  import { closePopupKey } from '@/components/Popup';
  import AppGroupItemSelect from './AppGroupItemSelect.vue';
  import { DeclaresEditor } from '../../DeclarsEditor';

  const props = defineProps<{type?: 'app' | 'seed', seedName?: string}>()
  const isSeed = props.type === 'seed'

  const data = ref<any[]>(getInitData(props.seedName))

  function validate() {
    for(const i in data.value) {
      const row = data.value[i]
      const name = row.name
      if (!name) {
        feedback.alertError(`第${i}行名称不能为空`)
        return false
      }

      const groups = isSeed ? getSeed(props.seedName).groups : currentApp.value.groups
      if(!groups) return true

      const groupNames = Object.keys(groups || {})
      if(!groups || groupNames.length === 0) return true

      // if(groupNames.includes(name)) {
      //   feedback.alertError(`分组【${name}】已存在`)
      //   return false
      // }
    }

    return true
  }

  const close = inject<() => void>(closePopupKey, void 0)
  function save() {
    if(!validate()) return

    const groups = {}
    for(const item of data.value) {
      const name = item.name
      if(name) {
        groups[name] = { ...item }
        delete groups[name].name
      }
    }
    if(isSeed) {
      getSeed(props.seedName).groups = groups
    } else {
      currentApp.value.groups = groups
    }

    close?.()
  }
</script>